require(['./config'], () => {
    //有返回值得参数放前边
    require(['header', 'footer'], () => {
        class Shopping {
            constructor() {

            }
            init () {
                // 根据localStorage的数据去渲染页面
                const cartList = window.localStorage.getItem('cart')
                // 判读那购物车是否为空
                if (cartList) {
                  // 渲染table
                  this.cartList = JSON.parse(cartList)
                  this.renderCart()
                } else {
                  // 代表购物车没有数据
                  $('#shopping_car').hide()
                  $('#cart-empty').show()
                }
              }
              renderCart () {
                $('#shop_tbody').html(template('srcShop', { cartList: this.cartList }))
                // 购物车也米娜渲染完成以后默认调用一次计算总价
                this.calcTotalMoney()
                this.checksChange()
              }
              checksChange () {
                // 单选框修改事件
                // 保留外层this
                const _this = this
                $('.checks').on('change', function () {
                  // 找到当前商品的id
                  const id = Number($(this).parents('tr').attr('data-id'))
                  console.log(id)
                  _this.cartList = _this.cartList.map(shop => {
                    // 根据从数据里找到当前商品，把商品的check属性赋值为当前选框的状态
                    if (shop.id === id) {
                      shop.check = $(this).prop('checked')
                    }
                    return shop
                  })
                  // 把localStorage更新
                  window.localStorage.setItem('cart', JSON.stringify(_this.cartList))
                  // 重新算一次总价
                  _this.calcTotalMoney()
                })
              }
              calcTotalMoney () {
                // 计算总价，无论做了什么骚操作，只要对结果有影响我就调用这个方法重新算总价
                const money = this.cartList.reduce((total, shop) => {
                  if (shop.check) {
                    total += shop.price * shop.count
                  }
                  return total
                }, 0)
                $('#Paymoney').html(money)
              }
        }
        new Shopping()
    })
})